import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:junyeyishu/utils/utils.dart';

class QG3DWidget extends StatefulWidget {
  String glb;
  QG3DWidget({super.key, required this.glb});

  @override
  State<QG3DWidget> createState() => _QG3DWidgetState();
}

class _QG3DWidgetState extends State<QG3DWidget> {
  bool loading = true;
  @override
  Widget build(BuildContext context) {
    var data = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

    <style>
      body {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        background-color: black;
        height: ${View.of(context).physicalSize.width - (kNavHeight * View.of(context).devicePixelRatio)}px;
      }
    
      model-viewer {
        width: ${View.of(context).physicalSize.width * 0.7}px;
        height: ${View.of(context).physicalSize.width * 0.7}px;
      }
    </style>
</head>
<body>
    <model-viewer camera-controls alt="Model" src="${widget.glb}"> </model-viewer>
</body>
</html>
""";

    return Stack(
      children: [
        Opacity(
          opacity: loading ? 0.01 : 1,
          child: InAppWebView(
              onLoadStop: (controller, url) {
                loading = false;
                if (mounted) setState(() {});
              },
              initialData: InAppWebViewInitialData(data: data)),
        ),
        loading
            ? const Center(
                child: CircularProgressIndicator(color: Colors.white))
            : Container(),
      ],
    );
  }
}
